<!-- 定时设置 -->
<template>
    <div>
        <div class="dsSetMain">
            <div class="content">
                <div class="treeContent" :class="dir == 'left' ? 'leftArrow' : 'rightArrow'">
                    <el-input placeholder="输入关键字搜索" v-model="input3" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>

                    <div class="treeMain">
                        <el-tree
                            :data="data"
                            show-checkbox
                            node-key="id"
                            :default-expanded-keys="[1, 4, 9, 99]"
                            :default-checked-keys="[999]"
                            :props="defaultProps"
                        >
                            <span slot-scope="{node}" class="custom-tree-node" :title="node.label" v-text="node.label"> </span>
                        </el-tree>
                    </div>
                </div>

                <div class="rightContent" v-if="currentPage == 'index'" :class="dir == 'left' ? 'leftTable' : 'rightTable'">
                    <div class="flex-right-item">
                        定时设置名：<label class="setName">{{ timedata.name }}</label>
                        <el-checkbox v-model="checkOne">表示该表使用该定时设置</el-checkbox>
                        <el-checkbox v-model="checkTwo">表示该表取消该定时设置</el-checkbox>
                        <el-checkbox v-model="checkThree">仅显示未配置的表</el-checkbox>
                    </div>
                    <div style="margin: 5px 0 15px 0">
                        <!-- <el-button type="primary">全选</el-button>
                        <el-button type="primary">全不选</el-button> -->
                        <el-button type="primary" @click="save">保存配置</el-button>
                    </div>
                    <div>
                        <tableIndex
                            :dataSource="dataSourceDetail"
                            :tableColumns="tableColumnsDetail"
                            :btnList="[]"
                            :pageSize="pageSize"
                            :pageCount="pageCount"
                            :pageNo="pageNo"
                            @pageChange="pageChange"
                            selection
                            @handleSelectionChange="handleTableSelectionChange"
                            :height="380"
                        ></tableIndex>
                    </div>
                </div>
            </div>

            <arrowLeft @arrowChange="arrowChange"></arrowLeft>
        </div>
    </div>
</template>

<script>
// import {Splitpanes, Pane} from "splitpanes"
// import "splitpanes/dist/splitpanes.css"
import {LeftTree, listData} from '@/mockData/monitorCenter.js'
import {PopupCommon} from '@/libs/popupCommon'
import arrowLeft from '@/components/customComponents/arrowLeft'
import tableIndex from '@/components/customComponents/customeTable/tableHeight.vue'
import {bsTableTwo} from '@/mockData/controlCenter'
export default {
    components: {
        arrowLeft,
        tableIndex
    },
    props: ['timedata'],
    // computed: {
    //     itemData() {
    //         return this.timedata
    //     }
    // },
    // watch: {
    //     itemData(newVal) {
    //         console.log(newVal, "222222222222")
    //         this.item = newVal
    //     }
    // },
    data() {
        return {
            item: {},
            selectTableItem: [],
            pageSize: 20,
            pageCount: 3,
            pageNo: 1,
            dataSourceDetail: bsTableTwo,
            tableColumnsDetail: [
                // {
                // 	prop: "TableName",
                // 	label: "序号",
                // },
                {
                    prop: 'cjqbh',
                    label: '采集器'
                },
                {
                    prop: 'ljzt',
                    label: '状态',
                    dictName: 'connectStatus'
                },
                {
                    prop: 'txdz',
                    label: '通讯地址'
                },
                {
                    prop: 'yh',
                    label: '用户'
                },
                {
                    prop: 'dblx',
                    label: '电表类型'
                },
                {
                    prop: 'bz',
                    label: '备注'
                },
                {
                    prop: 'cjsj1',
                    label: '创建时间'
                },
                {
                    prop: 'dqzt',
                    label: '状态'
                }
            ],
            checkOne: false,
            checkTwo: false,
            checkThree: false,
            dir: 'left',
            input3: '',
            /** 当前页面  index 首页，elec电表，water水表*/
            currentPage: 'index',
            hasIsSizes: true,
            count: listData.length,
            size: 20,
            current: 1,
            listData: listData,
            data: LeftTree,
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            console.log(this.timedata, '2123123123')
        })
    },
    destroyed() {},
    methods: {
        save() {
            this.$emit('close', '')
        },
        handleTableSelectionChange(d) {
            this.selectTableItem = d
        },
        // 分页点击事件
        pageChange(p) {
            this.pageNo = p
            //   this.initPage();
        },
        arrowChange(e) {
            this.dir = e
        },
        /** 查看详情 */
        gotoDetail(item) {
            if (item.type == 1) {
                console.log(item)
            }
        },
        back(e) {
            this.currentPage = 'index'
            console.log(e, 'back.................')
        },
        /** 网关点击*/
        gatewayClick() {
            this.currentPage = 'gateway'
        },
        /** 选中的左侧树节点后，点击在线设备等 */
        currentClick(type) {
            PopupCommon.notify('info', type + '可点击...')
        },
        /** 总设备在线等点击*/
        countAllClick(type) {
            PopupCommon.notify('info', type + '可点击...')
        },
        /** 水表2 电表1 点击 */
        countClick(type) {
            /** 当前页面  index 首页，elec电表，water水表*/
            if (type == 1) {
                this.currentPage = 'elec'
            }
            if (type == 2) {
                this.currentPage = 'water'
            }
        },
        getHeaderClass(level) {
            return level == 1 ? 'normal' : level == 2 ? 'lx' : 'gj'
        },
        getBottomClass(type, level) {
            if (type == 1 && level == 1) {
                return 'dbzc'
            } else if (type == 2 && level == 1) {
                return 'sbzc'
            } else {
                return 'yc'
            }
        },
        showDetail(item) {
            console.log(item)
        },
        // 页码点击事件,p当前页
        handleSizeChange(e) {
            this.size = e
            this.current = 1
            // this.initPage()
        }
    }
}
</script>

<style scoped lang="scss">
.flex-right-item {
    display: flex;
    line-height: 32px;
    height: 32px;
    .setName {
        color: red;
        margin-right: 20px;
    }
}
.custom-tree-node {
    width: 100%;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: block !important;
}
.dsSetMain {
    background-color: #fff;
    height: 510px;
    margin-top: -28px;
    position: relative;
}
.dsSetMain .content {
    padding: 10px;
    background-color: #fff;
    display: flex;
}
.leftArrow {
    width: 300px !important;
}
.rightArrow {
    width: 0 !important;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
}
.leftTable {
    max-width: calc(100% - 340px);
}
.rightTable {
    max-width: calc(100% - 0px);
}
.treeContent {
    margin-right: 0;
    height: 480px;
    transition: transform 0.3s;
    width: 300px;
    border-right: 1px solid #eee;
    padding-right: 10px;
}
.treeMain {
    height: 480px;
    overflow: auto;
    margin-top: 10px;
}
.rightContent {
    background-color: #fff;
    height: 500px;
    margin-left: 10px;
    flex: 1;
    text-align: left;
}
.listCount {
    height: 90px;
    border: 1px solid #eeeef0;
    position: relative;
    background-color: #f5f9fc;
    border-radius: 4px;
}
.listCountLeft {
    width: 50%;
    float: left;
}
.listCountRight {
    width: 50%;
    float: left;
}
.listLine {
    width: 2px;
    height: 45px;
    background-color: #eeeef0;
    position: absolute;
    top: 22px;
    left: 51%;
}
.leftItem {
    width: 25%;
    float: left;
    text-align: center;
    padding-top: 20px;
}

.leftItem img {
    width: 50px;
}
.leftItem div {
    display: inline-block;
    margin-left: 15px;
    line-height: 30px;
    text-align: left;
}

.leftItem div label {
    font-size: 16px;
    display: block;
}

.leftItem div span {
    font-size: 14px;
    color: #757e8b;
}

.leftItem div span b {
    font-size: 20px;
    margin-right: 10px;
    color: #333;
}
.rightItem {
    width: 25%;
    float: left;
    text-align: center;
    padding-top: 22px;
}
.rightItem .itemTop {
    font-size: 14px;
    line-height: 27px;
}
.rightItem .itemTop label {
    font-size: 12px;
    width: 10px;
    display: inline-block;
    height: 10px;
    border-radius: 8px;
    margin-right: 10px;
}
.green {
    background-color: #01b77a;
}
.gray {
    background-color: #707070;
}
.red {
    background-color: #e60000;
}
.orange {
    background-color: #ff9900;
}
.rightItem .itemBottom {
    margin-top: 3px;
}
.rightItem .itemBottom span {
    font-size: 14px;
    color: #757e8b;
}
.rightItem .itemBottom span b {
    font-size: 20px;
    margin-right: 10px;
    color: #333;
}
.selectValue {
    display: flex;
    height: 50px;
    background: #f7f8fc;
    margin-top: 15px;
    border-radius: 4px;
    line-height: 50px;
}
.selectValue .value {
    margin-left: 20px;
    font-size: 16px;
}
.selectValue .rightValue {
    flex: 1;
    text-align: right;
    margin-right: 20px;
}
.selectValue .rightValue span {
    font-size: 16px;
    color: #666;
}
.selectValue .rightValue span b {
    font-size: 16px;
    color: #333;
}
.selectValue .rightValue span label {
    width: 10px;
    display: inline-block;
    height: 10px;
    border-radius: 10px;
    margin-left: 40px;
    margin-right: 5px;
}
.gjw-list {
    /* height: calc(100vh - 168px); */
    background: #fff;
    margin-top: 10px;
    /* padding: 10px; */
}
.gjw-list .gjw-list-list {
    height: calc(100vh - 350px);
    overflow-y: auto;
    padding-top: 0px;
    margin-bottom: 10px;
}
.gjw-list .gjw-list-list .gjw-list-item {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-left: 10px;
    padding-top: 3px;
}
.gjw-list .gjw-list-list .gjw-list-item .item {
    margin-right: 10px;
    width: calc((100% - 60px) / 6);
    height: 100px;
    border-radius: 4px;
    background: #fff;
    margin-bottom: 10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 7px;
    position: relative;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header {
    font-size: 12px;
    height: 35px;
    line-height: 35px;
    background-color: #55cca4;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    color: #fff;
    overflow: hidden;
}
.gjw-list .gjw-list-list .gjw-list-item .item .db {
    background-color: #55cca4;
}
.gjw-list .gjw-list-list .gjw-list-item .item .sb {
    background-color: #6caae5;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-header img {
    float: left;
    margin: 10px 6px 0 10px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header label {
    font-size: 14px;
    float: left;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList {
    float: right;
    height: 35px;
    text-align: right;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .warn {
    float: right;
    margin-right: -10px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .level {
    font-size: 12px;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .qf {
    float: right;
    width: 10px;
    margin-right: 24px;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .status {
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 8px;
    float: right;
    margin-right: 10px;
    margin-top: 14px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .normal {
    background-color: #00ffa9;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .lx {
    background-color: #77dbb9;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .gj {
    background-color: #00ffa9;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom {
    background-color: #e2f7f0;
    height: 65px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .dbzc {
    background-color: #e2f7f0 !important;
}
.gjw-list .gjw-list-list .gjw-list-item .item .sbzc {
    background-color: #e9f6fe !important;
}
.gjw-list .gjw-list-list .gjw-list-item .item .yc {
    background-color: #f4f4f4 !important;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .countValue {
    font-size: 14px;
    color: #666;
    padding-top: 13px;
    padding-bottom: 3px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .countValue label {
    margin-left: 10px;
    margin-right: 10px;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .countValue span {
    font-size: 14px;
    color: #333;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .todayValue {
    font-size: 14px;
    color: #666;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .todayValue label {
    margin-left: 10px;
    margin-right: 10px;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .todayValue span {
    font-size: 14px;
    color: #333;
}
.gjw-list .gjw-list-page {
    height: 40px;
    padding-top: 10px;
    text-align: right;
}
.cursor {
    cursor: pointer;
}
</style>
